<template>
	<view>
		<view class="install-box">
			<view class="install-item">
				<view>报装产品<span style="color:red">*</span></view>
				<view class="install-add">请选择或添加产品</view>
			</view>
			<view class="install-item-sort" style="border-bottom: 1px solid gainsboro;">
				<view @click="serviceProducts" class="install-left-sort"><uni-icons type="plus" color="blue" size="18"></uni-icons>按分类添加</view>
				<view class="install-right-sort"><uni-icons type="scan" color="blue" size="15"></uni-icons>扫机身码添加</view>
			</view>
			<view class="install-item" style="border-bottom: 1px solid gainsboro;">
				<view>移机区间<span style="color:red">*</span></view>
				<view @click="fault()" class="install-add">同一地址，无需运输<uni-icons type="right" color="darkgray" size="16"></uni-icons></view>
			</view>
			<view class="install-item" style="border-bottom: 1px solid gainsboro;">
				<view>服务地址<span style="color:red">*</span></view>
				<view @click="address()" style="color:gainsboro" class="install-add">请选择地址<uni-icons type="right" color="darkgray" size="16"></uni-icons></view>
			</view>
			<view class="install-item">
				<view>期望服务时间<span style="color:red">*</span></view>
				<view @click="serviceTime()" style="color:gainsboro" class="install-add">请先添加和产品联系人<uni-icons type="right" color="darkgray" size="16"></uni-icons></view>
			</view>
		</view>
		<view @click="onDisable" v-if="isDisable" style="text-align: center;font-size: 20rpx;">展开更多选填项<uni-icons type="down" color="down" size="16"></uni-icons></view>
		<view class="notRequired-box" v-if="!isDisable">
			<view class="notRequired-title">
				<view style="font-size: 28rpx;font-weight: bold;">非必填</view>
				<view style="font-size:20rpx;color:gray;margin-left: 10rpx;">填写有助于为您提供更好的服务</view>
			</view>
			<view class="notRequired-fault">
				<view class="install-item" >
					<view>备注信息</view>
					<view style="color:gainsboro">帮助工程师更高效的完成服务<uni-icons type="right" color="darkgray" size="16"></uni-icons></view>
				</view>
			</view>
		</view>
		<addressVue :showBottom="showBottom" @child-event="isShowBottom"></addressVue>
		<footerButton :installStandard="installStandard"></footerButton>
		<serviceTime :serviceBottom="serviceBottom" @child-service="closeServiceTime"></serviceTime>
		<faultStatus :faultBottom="faultBotom" @child-fault="closeFault"></faultStatus>
	</view>
</template>

<script>
	import addressVue from '../../../../components/address/address.vue';
	import footerButton from '../../../../components/footer-button/footer-button.vue';
	import serviceTime from '../../../../components/service-time/service-time.vue';
	import faultStatus from '../../../../components/fault-status/fault-status.vue';
	
	export default {
		components:{footerButton,addressVue,serviceTime,faultStatus},
		data() {
			return {
				installStandard:"relocation",
				faultBotom:false,
				serviceBottom:false,
				showBottom:false,
				radiolist: [
					{
					name: '货已到',
					disabled: false
				  },
					{
					  name: '货未到',
					  disabled: false
					}
				],
				radiovalue:'货已到',
				isRadiolist: [
					{
					name: '是',
					disabled: false
				  },
					{
					  name: '否',
					  disabled: false
					}
				],
				isRadio:'',
				isDisable:true
			}
		},
		methods: {
			fault(){
				this.faultBotom=true;
			},
			closeFault(falg){
				this.faultBotom=false;
			},
			closeServiceTime(falg){
				this.serviceBottom=false;
			},
			serviceTime(){
				this.serviceBottom=true;
			},
			isShowBottom(falg){
				this.showBottom=false;
			},
			address(){
				this.showBottom=true;
			},
			onDisable(){
				this.isDisable=!this.isDisable;
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			serviceProducts(){
				uni.navigateTo({
					url: "/pages/index/afterSales/serviceProducts/serviceProducts"
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.notRequired-fault{
		border-radius: 25rpx;
		background-color: white;
		margin: 20rpx;
		box-sizing: border-box;
	}
	.install-left-sort{
		padding:10rpx 70rpx 10rpx 70rpx;
		border: 1rpx solid gainsboro;
		border-radius: 50rpx;
		margin-right: 30rpx;
		display: flex;
		align-items: center;
	}
	.install-right-sort{
		padding:10rpx 70rpx 10rpx 70rpx;
		border: 1rpx solid gainsboro;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
	}
	.notRequired-box{
		margin-top: 30rpx;
	}
	.notRequired-title{
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}
	.install-box{
		background-color: white;
		border-radius: 10px;
		margin: 20rpx;
	}
	.install-item-sort{
		margin: 0 auto;
		width:95%;
		padding:20rpx 0rpx 20rpx 0rpx;
		display: flex;
		justify-content: center;
	}
	.install-item{
		margin: 0 auto;
		width:95%;
		padding:20rpx 0rpx 20rpx 0rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.install-add{
		align-items: center;
		display: flex;
	}
</style>
